<template>
  <div class="right-form">
    <div>
      <a-tabs :tabBarStyle="{marginLeft:'10px'}" v-model="activeName">
        <a-tab-pane key="1" tab="组件配置" v-if="select.key">
          <ItemsConfig :eleItem.sync="eleItem" />
        </a-tab-pane>
        <a-tab-pane key="2" tab="表单配置">
          <FormConfig :formConfig.sync="formConfig" />
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>
<script>
import FormConfig from './com/form-config.vue'
import ItemsConfig from './com/items-config.vue'
export default {
  name: 'rightForm',
  components: {
    FormConfig,
    ItemsConfig
  },
  props: ['select', 'formConfig'],
  data() {
    return {
      activeName: '2',
      eleItem: ''
    }
  },
  watch: {
    select: {
      handler(data) {
        this.eleItem = data
        this.activeName = data.key && '1'
      }
    },
    eleItem: {
      handler(data) {
        this.$emit('update:select', data)
      },
      deep: true
    }
  }
}
</script>
<style lang="less" scoped>
.right-form {
}
</style>